import { SearchPanel } from "./search-panel";
import { List } from "./list";
import { useState, useEffect } from "react";
import { useProjects } from "./project";
import { useUsers } from "./user";
import React from "react";
import { useDebounce } from "../../utils/index";
import styled from "@emotion/styled";
import { useQueryParam } from "utils/url";
import { Row } from "antd";
import { ButtonNoPadding } from "components/lib";
import { useDispatch } from "react-redux";
import { projectListAction } from "./project-list.store";
const ProjectListScreen = (props: { projectButton: JSX.Element }) => {
  const dispatch = useDispatch();
  const [params, setparam] = useState({
    name: "",
    personId: "",
  });
  const debounceParam = useDebounce(params, 1000);
  const { isLoading, error, data: list } = useProjects(debounceParam);
  const { data: users } = useUsers();

  return (
    <Container>
      <Row justify={"space-between"}>
        <h1>项目列表</h1>
        <ButtonNoPadding
          type={"link"}
          onClick={() => {
            dispatch(projectListAction.openProjectModal());
            dispatch(
              projectListAction.openModelId({ id: 0, type: "chuangjian" })
            );
          }}
        >
          创建项目
        </ButtonNoPadding>
      </Row>

      <SearchPanel
        param={params}
        setparam={setparam}
        users={users || []}
      ></SearchPanel>
      <List
        params={params}
        users={users}
        dataSource={list || []}
        loading={isLoading}
      ></List>
    </Container>
  );
};
ProjectListScreen.whyDidYouRender = false;
const Container = styled.div`
  padding: 3.2rem;
`;
export default ProjectListScreen;
